import { ReactNode } from 'react'

export const mdxComponents = {
  h1: ({ children }: { children?: ReactNode }) => (
    children ? (
      <h1 className="text-4xl font-bold mt-8 mb-4">{children}</h1>
    ) : <></>
  ),
  h2: ({ children }: { children: ReactNode }): ReactNode => (
    <h2 className="text-3xl font-bold mt-6 mb-3">{children}</h2>
  ),
  h3: ({ children }: { children: ReactNode }): ReactNode => (
    <h3 className="text-2xl font-bold mt-5 mb-2">{children}</h3>
  ),
  h4: ({ children }: { children: ReactNode }): ReactNode => (
    <h4 className="text-xl font-bold mt-4 mb-2">{children}</h4>
  ),
  h5: ({ children }: { children: ReactNode }): ReactNode => (
    <h5 className="text-lg font-bold mt-3 mb-2">{children}</h5>
  ),
  h6: ({ children }: { children: ReactNode }): ReactNode => (
    <h6 className="text-base font-bold mt-3 mb-2">{children}</h6>
  ),
  p: ({ children }: { children: ReactNode }): ReactNode => (
    <p className="text-base leading-7 mb-4">{children}</p>
  ),
  ul: ({ children }: { children: ReactNode }): ReactNode => (
    <ul className="list-disc list-inside mb-4 ml-4">{children}</ul>
  ),
  ol: ({ children }: { children: ReactNode }): ReactNode => (
    <ol className="list-decimal list-inside mb-4 ml-4">{children}</ol>
  ),
  li: ({ children }: { children: ReactNode }): ReactNode => (
    <li className="mb-1">{children}</li>
  ),
  blockquote: ({ children }: { children: ReactNode }): ReactNode => (
    <blockquote className="border-l-4 border-gray-200 pl-4 my-4 italic">
      {children}
    </blockquote>
  ),
  table: ({ children }: { children: ReactNode }): ReactNode => (
    <div className="overflow-x-auto my-6">
      <table className="min-w-full divide-y divide-gray-200">
        {children}
      </table>
    </div>
  ),
  th: ({ children }: { children: ReactNode }): ReactNode => (
    <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
      {children}
    </th>
  ),
  td: ({ children }: { children: ReactNode }): ReactNode => (
    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
      {children}
    </td>
  ),
  code: ({ children }: { children: ReactNode }): ReactNode => (
    <code className="bg-gray-100 rounded px-1 py-0.5 text-sm font-mono">
      {children}
    </code>
  ),
  pre: ({ children }: { children: ReactNode }): ReactNode => (
    <pre className="bg-gray-100 rounded-lg p-4 overflow-x-auto my-4 text-sm">
      {children}
    </pre>
  ),
}

export const mdxOptions = {
  remarkPlugins: [],
  rehypePlugins: [],
} 